<template>
    <div class="bars">
        <transition
            enter-class
            enter-active-class="animated fadeIn"
            enter-to-class
            leave-class
            leave-active-class="animated fadeOut"
            leave-to-class
        >
            <div class="mask" v-if="flag"></div>
        </transition>
        <transition
            enter-class
            enter-active-class="animated fadeInRight"
            enter-to-class
            leave-class
            leave-active-class="animated fadeOutRight"
            leave-to-class
        >
            <div class="menu" v-if="flag" @click="flag=false">
                <button @click="showToast">显示toast</button>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            abc:true
        };
    },
    methods: {
        showToast(){
            this.$eventBar.$emit("showToast","提示")
        }
    },
    created() {
        this.$eventBar.$on("toggleBars", function(){
            if(!this.abc){
                return;
            }
            this.flag = !this.flag
            this.abc = false;
            setTimeout(()=>{
                this.abc = true;
            },700)
        }.bind(this))
    }
};
</script>

<style>
</style>